<template>
  <diy-container
    :status="'content'"
    :border-bottom="false"
    ref="container"
    title="用户登录"
    :headerVisable="true"
    headerBackGroudColor="#ffffff"
  >
    <view class="u-nav-slot" slot="navbarLeft" @click="navigation">
      <u-icon name="arrow-left" size="19"></u-icon>
    </view>
    <view class="login-container">
      <view class="login-box" v-if="!isWechat">
        <view class="login-form" v-if="!resisterIsShow">
          <view class="label-bg">账号密码登录</view>

          <view class="login-card">
            <view class="card-item line">
              <u--input placeholder="请输入账号" v-model="loginForm.nickName"></u--input>
            </view>
            <view class="card-item">
              <u--input :password="passwordFlag" placeholder="请输入密码" v-model="loginForm.passWord">
                <template slot="suffix"><u-icon name="eye" @click="passwordFlag = !passwordFlag"></u-icon></template>
              </u--input>
            </view>
            <view class="card-item">
              <button class="login-btn">登录</button>
            </view>
            <view class="card-item tips">
              <view>没有账号?</view>
              <view class="register-tips" @click="resisterIsShow = true">立即注册</view>
            </view>
          </view>
        </view>

        <view class="resister-box" v-else>
          <view class="label-box">
            <view class="phone-label">手机号快捷登录</view>
            <view class="tips">未注册过的手机号将自动创建账号</view>
          </view>

          <view class="register-form">
            <view class="register-phone">
              <u--input placeholder="请输入手机号" border="surround" shape="circle" clearable v-model="loginForm.phone">
                <template slot="prefix">
                  <span class="iconfont icon-shouji"></span>
                </template>
              </u--input>
            </view>

            <view class="register-code">
              <u--input placeholder="请输入验证码" border="surround" shape="circle" clearable v-model="loginForm.code">
                <template slot="prefix">
                  <span class="iconfont icon-youxiang"></span>
                </template>
                <template slot="suffix">
                  <span class="code" v-if="Countdown == 60" @click="getCode">获取验证码</span>
                  <span v-else class="Countdown">{{ Countdown }}秒后重发</span>
                </template>
              </u--input>
            </view>

            <view class="register-btn">
              <view class="Agreement">
                <u-radio v-model="loginForm.agree" />
                <span>同意用户协议与隐私政策</span>
              </view>

              <button class="login-btn register" @click="registerHandelClick">注册/登录</button>
            </view>
          </view>
        </view>

        <view class="other-ways">
          <view class="title">
            <u-divider text="其他方式登录"></u-divider>
          </view>
          <view class="phone-login" @click="resisterIsShow = true">
            <img src="@/static/images/phone.png" class="phone" alt="" />
            <view class="text">手机登录</view>
          </view>
        </view>
      </view>

      <view class="login-box wechat-login" v-if="isWechat">
        <u-button class="login-btn" type="primary">
          <span class="iconfont icon-weixin"></span>
          <span>微信一键登录</span>
        </u-button>
        <view class="Agreement tips">
          <u-radio v-model="loginForm.agree" />
          <span>同意</span>
          <span>《用户协议与隐私政策》</span>
        </view>
        <view class="tips">仅获得您的公开信息（昵称、头像）</view>
      </view>
    </view>

    <u-toast ref="uToast"></u-toast>
  </diy-container>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        agree: false,
        phone: "",
        code: ""
      },
      passwordFlag: true,
      resisterIsShow: false,
      Countdown: 60,
      time: null,
      isWechat: this.$utils.isWechat()
    };
  },
  computed: {},
  methods: {
    registerHandelClick() {
      let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!this.loginForm.code && !this.loginForm.phone) {
        return this.$refs.uToast.show({
          message: "请填写完整信息",
          type: "error"
        });
      }
      if (!reg_tel.test(this.loginForm.phone)) {
        return this.$refs.uToast.show({
          message: "请输入正确的手机号",
          type: "error"
        });
      }
      if (!this.loginForm.agree) {
        return this.$refs.uToast.show({
          message: "请勾选协议",
          type: "error"
        });
      }
    },

    getCode() {
      // 模拟向后端请求验证码
      uni.showLoading({
        title: "正在获取验证码"
      });
      setTimeout(() => {
        uni.hideLoading();
        uni.$u.toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        this.time = setInterval(() => {
          this.Countdown--;
          if (this.Countdown == 0) {
            this.Countdown = 60;
            clearInterval(this.time);
          }
        }, 1000);
      }, 2000);
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
};
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  background: url("../../static/images/login-bg.png");
  padding: 40rpx;
  .code {
    color: #ca73dd;
    font-size: 26rpx;
  }
  .login-btn {
    color: rgb(0, 0, 0);
    width: 100%;
    font-size: 32rpx;
    font-weight: bold;
    outline: none;
    border: none;
    border-radius: 40rpx;
    background: linear-gradient(to left, rgb(255, 206, 255), rgb(228, 169, 253));
  }

  .login-btn:after {
    border: none !important;
  }
  .Countdown {
    font-size: 24rpx;
    color: #333;
  }
  .resister-box {
    /deep/ .u-input {
      height: 88rpx;
      border: 1px solid #eee;
      padding: 0 30rpx;
    }
    .register-form {
      .iconfont {
        font-size: 36rpx;
      }
    }
    .register-code {
      margin-top: 30rpx;
    }
    .label-box {
      .phone-label {
        font-size: 50rpx;
        font-weight: bold;
      }
      .tips {
        font-size: 24rpx;
        margin-top: 10rpx;
        color: #838383;
        margin-bottom: 60rpx;
      }
    }
    .register-btn {
      .Agreement {
        color: rgba(0, 0, 0, 0.5);
        margin: 50rpx 0;
        font-size: 20rpx;
        display: flex;
        align-items: center;
      }
      .register {
        margin-top: 60rpx;
        color: #fff;
        background-image: -webkit-linear-gradient(top left, #ffd8c2, #fe7c84 77%);
      }
    }
  }
  .wechat-login {
    .icon-weixin {
      font-size: 48rpx;
    }
    .Agreement {
      display: flex;
      margin: 50rpx 0 30rpx 0;
      justify-content: center;
      font-size: 32rpx !important;
    }
    .tips {
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
  }
  .login-box {
    margin-top: 250rpx;
    .other-ways {
      margin-top: 200rpx;
      .phone-login {
        display: flex;
        margin-top: 100rpx;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .phone {
          width: 100rpx;
        }
        .text {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #303133;
        }
      }
    }
    .login-form {
      .label-bg {
        background: url("../../static/images/font-bg.png");
        background-repeat: no-repeat;
        font-size: 48rpx;
        font-weight: bold;
        background-position: left bottom;
        background-size: 300rpx 20rpx;
      }
      .line {
        border-bottom: 2rpx solid #f5f5f5;
      }

      .login-card {
        margin-top: 40rpx;
        background: #fff;
        border-radius: 30rpx;
        padding: 40rpx;
        .card-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 88rpx;
          padding-bottom: 20rpx;

          .register-tips {
            color: #ca73dd;
            margin-left: 10rpx;
          }
        }
        .tips {
          display: flex;
          justify-content: center;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
